<template>
    <div class="config-container">
        <div class="config-box" v-if="common && common.length">
            <div class="config-box-head">
                <div class="config-box-head-icon"></div>
                <div class="config-box-title">通用
                    <i class="el-icon-edit-outline item-edit-icon" @click.stop="handleShowUpdate(common, '通用')"></i>
                </div>
            </div>
            <div class="config-box-body">
                <el-form label-width="120px" size="mini" style="width:100%">
                    <el-row :gutter="10">
                        <el-col :md="12" :xl="12" v-for="c in common">
                            <el-form-item :label="c.attr_name" style="margin-bottom: 10px;"
                                          v-tippy="{ arrow: true, placement: 'top-start' }" :content="tipMsg(c)">
                                <div class="item-info">
                                    <div class="item-text">{{c.attr_value}}</div>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>

        <div class="config-box" v-if="dnd && dnd.length">
            <div class="config-box-head">
                <div class="config-box-head-icon"></div>
                <div class="config-box-title">消息免打扰
                    <i class="el-icon-edit-outline item-edit-icon" @click.stop="handleShowUpdate(dnd, '消息免打扰')"></i>
                </div>
            </div>
            <div class="config-box-body">
                <el-form label-width="120px" size="mini" style="width:100%">
                    <el-row :gutter="10">
                        <template v-for="c in dnd">
                            <el-col :md="c.attr_name === 'dnd_switch'? 24: 12" :xl="c.attr_name === 'dnd_switch'? 24: 12">
                                <el-form-item :label="c.attr_label || c.attr_name" style="margin-bottom: 10px;"
                                              v-tippy="{ arrow: true, placement: 'top-start' }" :content="tipMsg(c)">
                                    <div class="item-info">
                                        <el-switch v-if="c.attr_name === 'dnd_switch'" v-model="c.attr_value" :disabled="true" style="margin-top:5px;"
                                                   active-value="Y" inactive-value="N"></el-switch>
                                        <div class="item-text" v-else>{{c.attr_value}}</div>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-row>
                </el-form>
            </div>
        </div>

        <!--<div class="config-box" v-if="oss && oss.length">
            <div class="config-box-head">
                <div class="config-box-head-icon"></div>
                <div class="config-box-title">文件OSS存储
                    <i class="el-icon-edit-outline item-edit-icon" @click.stop="handleShowUpdate(oss, '文件OSS存储')"></i>
                </div>
            </div>
            <div class="config-box-body">
                <el-form label-width="120px" size="mini" style="width:100%">
                    <el-row :gutter="10">
                        <template v-for="c in oss">
                            <el-col :md="c.attr_name === 'oss_switch'? 24: 12" :xl="c.attr_name === 'oss_switch'? 24: 12">
                                <el-form-item :label="c.attr_label || c.attr_name" style="margin-bottom: 10px;"
                                              v-tippy="{ arrow: true, placement: 'top-start' }" :content="tipMsg(c)">
                                    <div class="item-info">
                                        <el-switch v-if="c.attr_name === 'oss_switch'" v-model="c.attr_value" :disabled="true" style="margin-top:5px;"
                                                   active-value="OSS" inactive-value="LOCAL"></el-switch>
                                        <div class="item-text" v-else>{{c.attr_value}}</div>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-row>
                </el-form>
            </div>
        </div>-->

        <div class="config-box" v-if="ICON_FONT && ICON_FONT.length">
            <div class="config-box-head">
                <div class="config-box-head-icon"></div>
                <div class="config-box-title">图标库
                    <i class="el-icon-edit-outline item-edit-icon" @click.stop="handleShowUpdate(ICON_FONT, '图标库')"></i>
                </div>
            </div>
            <div class="config-box-body">
                <el-form label-width="120px" size="mini" style="width:100%;">
                    <template  v-for="c in ICON_FONT">
                        <el-form-item :label="c.attr_name" style="margin-bottom: 10px;">
                            <div class="item-info">
                                <div class="item-text">{{c.attr_value}}</div>
                            </div>
                        </el-form-item>
                        <el-form-item :label="c.attr_name" style="margin-bottom: 10px;">
                            <div class="item-info">
                                <div class="item-text">{{c.remark}}</div>
                            </div>
                        </el-form-item>
                    </template>
                </el-form>
            </div>
        </div>
        <!--<div class="actions">
            <el-button type="primary" @click="showEdit()" v-if="!isEdit">修改</el-button>
            <el-button @click="hideEdit()" v-if="isEdit">取消</el-button>
            <el-button type="primary" v-if="isEdit" @click="edit">保存</el-button>
        </div>-->

        <el-drawer
          :title="configFormTitle"
          v-model="configFormShow"
          :append-to-body="true"
          :with-header="true"
          custom-class="app-drawer config-container"
          direction="rtl"size="660px"
          :before-close="handleConfigFormClose">
            <div class="config-form-body">
                <el-form label-width="110px" size="mini" style="width:100%;flex:1;">
                    <template v-for="c in selectedConfigs">
                        <el-form-item :label="c.attr_label || c.attr_name" style="margin-bottom: 10px;">
                            <el-switch v-if="c.attr_name === 'dnd_switch'" v-model="c.attr_value"
                                       active-value="Y" inactive-value="N"></el-switch>
                            <el-time-picker v-else-if="c.attr_name === 'dnd_st' || c.attr_name === 'dnd_et'"
                                            v-model="c.attr_value" value-format="HH:mm:ss"
                                            placeholder="选择时间范围">
                            </el-time-picker>
                            <el-switch v-else-if="c.attr_name === 'oss_switch'" v-model="c.attr_value"
                                       active-value="OSS" inactive-value="LOCAL"></el-switch>

                            <el-radio-group v-else-if="c.attr_name === 'loginType'" v-model="c.attr_value" size="mini">
                                <el-radio-button label="account">账号</el-radio-button>
                                <el-radio-button label="wxsp">服务号</el-radio-button>
                                <el-radio-button label="mobile">手机号</el-radio-button>
                                <!--<el-radio-button label="wxmp">小程序</el-radio-button>-->
                                <el-radio-button label="accountMobile">账号 / 手机号</el-radio-button>
                                <el-radio-button label="accountWxsp">账号 / 服务号</el-radio-button>
                                <el-radio-button label="mobileWxsp">手机号 / 服务号</el-radio-button>
                                <el-radio-button label="accountMobileWxsp">账号 /手机号 / 服务号</el-radio-button>
                                <!--<el-radio-button label="accountWxmp">账号 / 小程序</el-radio-button>-->
                            </el-radio-group>
                            <el-radio-group v-else-if="c.attr_name === 'regType'" v-model="c.attr_value" size="mini">
                                <el-radio-button label="no">禁止注册</el-radio-button>
                                <el-radio-button label="form">表单注册</el-radio-button>
                                <el-radio-button label="scancode">扫码注册</el-radio-button>
                                <el-radio-button label="scancodeForm">扫码+表单注册</el-radio-button>
                            </el-radio-group>
                            <el-switch v-else-if="c.attr_name === 'regAudit'" v-model="c.attr_value" active-value="Y" inactive-value="N"></el-switch>

                            <el-input v-else type="textarea" v-model="c.attr_value"></el-input>
                        </el-form-item>
                        <el-form-item v-if="c.type === 'ICON_FONT'" label="图标" style="margin-bottom: 10px;">
                            <el-input type="textarea" v-model="c.remark" :rows="20"></el-input>
                        </el-form-item>
                    </template>
                </el-form>
                <div class="config-form-footer">
                    <el-button @click="configFormShow = false" style="width:120px;"> 取消 </el-button>
                    <el-button type="primary" @click="handleSave()" style="width:120px;"> 保存 </el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script type="text/javascript">
    import { mapState, mapActions } from 'vuex';

    export default {
        data() {
            return {
                configs: [],
                wxmp: [],
                wepay: [],
                wxsp: [],
                ICON_FONT: [],
                common: [],
                dnd: [],
                oss: [],

                selectedConfigs: [],
                configFormTitle: '',
                configFormShow: false,

                times: []
            }
        },
        created: function () {
        },
        mounted() {
            this.init();
        },
        components: {

        },
        watch: {

        },
        computed: mapState([
            'loginUser'
        ]),
        methods: {
            ...mapActions([
                'initLoginUser'
            ]),
            async init() {
                let configs = await this.$japi.project.getConfigListAll();

                let wxmp = _.remove(configs, { type: 'wxmp' });
                let wepay = _.remove(configs, { type: 'wepay' });
                let wxsp = _.remove(configs, { type: 'wxsp' });
                let dnd = _.remove(configs, { type: 'dnd' });
                let oss = _.remove(configs, { type: 'oss' });
                let login = _.remove(configs, { type: 'login' });
                let ICON_FONT = _.remove(configs, { type: 'ICON_FONT' });
                let common = _.remove(configs, { type: 'COMMON' });

                this.wxmp = wxmp;
                this.wepay = wepay;
                this.wxsp = wxsp;
                this.dnd = dnd;
                this.oss = oss;
                this.login = login;
                this.ICON_FONT = ICON_FONT;
                this.common = common;
            },
            handleShowUpdate(configs, title) {
                this.selectedConfigs = _.cloneDeep(configs);
                this.configFormShow = true;
                this.configFormTitle = title || '修改';
            },
            async handleSave() {

                let ret = await this.$japi.project.updateConfig(this.selectedConfigs);

                if(ret) {
                    this.$message('修改成功！');
                    this.configFormShow = false;
                    this.init();
                }
            },
            handleConfigFormClose(done) {
                done();
            },
            tipMsg(c) {
                let msg = _.get(c, 'remark', '') || _.get(c, 'attr_label', '') || "";
                let name = _.get(c, 'attr_name', '') || "";

                return `${msg}【${name}】`;
            }
        }
    }
</script>
